<template>
  <div class="swrap gl_cen">
    <Swipe class="swiper" :autoplay="3000" lazy-render indicator-color="#fff">
      <swipe-item v-for="(it, index) in swipe_items" :key="index">
        <div class="item">
          <img :src="it.img" alt="" />
          <label for="">{{ it.desc }}</label>
        </div>
      </swipe-item>
    </Swipe>
  </div>
</template>

<script>
import { defineComponent, onMounted } from "@vue/runtime-core";
import { Swipe, SwipeItem } from "vant";

export default defineComponent({
  name: "Swiper",
  props: {
    swipe_items: Array,
  },
  components: {
    Swipe,
    SwipeItem,
  },
  setup(props) {
    onMounted(() => {
      // console.log(props.swipe_items);
    });
  },
});
</script>

<style lang="scss" scoped>
.swrap {
  width: 100%;
  height: 300px;
  
  position: relative;
  &:before{
    content: "";
    width: 100%;
    height: 200px;
    border-radius: 0 0 50% 50%;
    background: linear-gradient(2deg, #9ee6ff, #19aeff 50%, #19aeff);
    position: absolute;
    z-index: 1;
  }
  p{
      display: block;
      margin: 10px auto;
      color:#fff;
      width:90%;
  }
}
.swiper {
  background: #00f;
  height: 300px;
  width: 90%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0px;
  border-radius: 25px;
  z-index:2;
  .item {
    width: 100%;
    height: 100%;
    position: relative;
    img {
      width: 100%;
      position: absolute;
      z-index: 1;
    }
    label {
      position: absolute;
      z-index: 2;
      font-size: 16px;
      color: #fff;
      bottom: 20px;
      left: 20px;
    }
  }
}
</style>